<template>
  <Echart :options="options" />
</template>
<script setup lang="ts">
  import { computed, onMounted, ref } from 'vue'
  import { statApi } from '@/seed-application/api'
  import { getAction } from '@/seed-application'
  import { Echart } from '@/components/Echart'
  import { EChartsOption } from 'echarts';

  export type PropsType = { actionName: string, seedName?: string, microName?: string }
  const props = defineProps<PropsType>()
  const action = getAction(props.actionName, props.seedName, props.microName)
  const stats = action.stats || action.seed.stats || {}
  const data = ref<Record<string, any>>()
  const loading = ref(false)

  const options = computed(() :EChartsOption => {
    const labels = []
    const values = []
    for(const statName in stats) {
      const stat = stats[statName]
      labels.push(stat.label)
      values.push(data.value?.[statName] || '--')
    }
    return {
      xAxis: { type: 'category', data: labels },
      yAxis: { type: 'value' },
      series: [{data: values, type: 'bar'}]
    }
  });

  onMounted(async () => {
    try {
      loading.value = true
      data.value = await statApi(action)
    } finally {
      loading.value = false
    }
  })
</script>
